<template>
	<view class="collect-content">
		<ul v-if='collectData.length == 0 ? false:true'>
			<li @click='goDetail(item)' v-for='(item,index) in collectData' :key='index'>
				<image class='img' :src="item.img"></image>
			  <view class="right">
			  	<p><span>{{ item.name }}</span><span @click.stop='handleCollect'>···</span></p>
					<p><span>★4.5</span> 月售{{ item.sellNum }}<span>大地快送</span></p>
					<p>起送￥20 远距离配送￥{{ item.price }}<span>￥999.9</span><span>2.9km</span></p>
					<p>
						<span>大地补贴3元</span>
						<span>25减18</span>
						<span>9.99元特价</span>
					</p>
			  </view>
				<view class="mask-box" @click.stop='redeceMask' v-if='flag == false ? false:true'>
					<view class='mask' @click.stop='reduceCollect(index)'>
						<image class='img' src="@/static/cart/collect2.png"></image>
						<span>取消关注</span>
					</view>
				</view>
			</li>
		</ul>
		<view class="finish" v-if='collectData.length == 0 ? false:true'>
			<span>已加载全部数据</span>
		</view>
	  <view class='empty' v-else>
			<image class='.img' src="@/static/cart/collect.png"></image>
			<p>暂无收藏商品</p>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			  flag: false	
			}
		},
		computed:{
			collectData(){
				return this.$store.state.a.collectData
			}
		},
		methods:{
			handleCollect(){
				this.flag = !this.flag
			},
			// 跳转至详情页
			goDetail(item){
				uni.navigateTo({
					url:'/components/cardItems',
					success(res) {
						res.eventChannel.emit('sendDetail', { data: item })
					}
				})
			},
			// 取消该商品收藏
			reduceCollect(index){
				this.$store.commit('reduceCollect',index)
			},
			// 取消该商品遮罩
			redeceMask(){
				this.flag = !this.flag
				console.log(this.flag)
			}
		}
	}
</script>

<style lang='scss'>
	.empty{
		width: 100%;
		text-align: center;
		color: #808080;
		.img{
			margin-top: 20%;
		}
		p{
			line-height: 200rpx;
		}
	}
	.collect-content{
		width: 100%;
		.finish{
			width: 100%;
			height: 100rpx;
			border-top: 1rpx solid #C8C7CC;
		  color: #808080;
			font-size: 28rpx;
			text-align: center;
			line-height: 100rpx;
		}
		ul{
			width: 100%;
			margin-top: 20rpx;
			padding: 0;
			box-sizing: border-box;
			li{
				width: 100%;
				height: 240rpx;
				display: flex;
				align-items: center;
				position: relative;
				box-sizing: border-box;
				padding: 0 2.5% 0;
				.mask-box{
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0,.4);
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					.mask{
						width: 150rpx;
						height: 150rpx;
						background-color: white;
						border-radius: 50%;
						display: flex;
            flex-wrap: wrap;
            justify-content: center;
						.img{
							width: 70rpx;
							height: 70rpx;
							margin-top: 20rpx;
						}
						span{
							font-size: 28rpx;
							color: #555555;
							margin-bottom: 15rpx;
						}
					}
				}
				.img{
					width: 170rpx;
					height: 170rpx;
					border-radius: 15rpx;
				}
				.right{
					width: calc(100% - 185rpx);
					height: 185rpx;
					margin-left: 15rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					p{
						width: 100%;
						height: 46.25rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: flex;
						align-items: center;
					}
					p:first-child{
						position: relative;
						span:first-child{
							width: 450rpx;
							font-size: 33rpx;
							letter-spacing: 5rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap
						}
						span:last-child{
							position: absolute;
							right: 0;
							color: #808080;
							letter-spacing: 5rpx;
							font-size: 45rpx;
						}
					}
					p:nth-child(2){
						position: relative;
						span:first-child{
							color: rgba(216,30,6,1);
							margin-right: 10rpx;
						}
						span:last-child{
							background-color: #00BFFF;
							border-radius: 7rpx;
							color: white;
							height: 40rpx;
							line-height: 40rpx;
							padding: 2rpx 13rpx;
							letter-spacing: 5rpx;
							position: absolute;
							right: 0;
						}
					}
					p:nth-child(3){
						position: relative;
						span:first-child{
							font-size: 22rpx;
							text-decoration: line-through;
							margin-left: 5rpx;
						}
						span:last-child{
							position: absolute;
							right: 0;
						}
					}
					p:nth-child(n+2){
						font-size: 25rpx;
						color: #999999;
					}
					p:last-child{
						span{
							height: 40rpx;
							border-radius: 7rpx;
							text-align: center;
							line-height: 40rpx;
							letter-spacing: 5rpx;
							color: rgba(216,30,6,1);
							border: 1rpx solid rgba(216,30,6,.5);
							background-color: rgba(216,30,6,.02);
							padding: 0 10rpx;
						}
						span:first-child{
							background-color: rgba(216,30,6,0.7);
							color: white;
						}
						span:nth-child(n+2){
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
